From d09880944e9e65223fbba3f3f8921bbda4383e2a Mon Sep 17 00:00:00 2001
From: unknown <1535852499@qq.com>
Date: Fri, 8 Dec 2023 15:04:28 +0800
Subject: [PATCH] zyh

---
 .../src/views/Zhou/FHGL_20231208134811.vue    | 1232 ++++++++++
 .../src/views/Zhou/FHGL_20231208134900.vue    | 1233 ++++++++++
 .../src/views/Zhou/FHGL_20231208135120.vue    | 1234 ++++++++++
 .../src/views/Zhou/FHGL_20231208135148.vue    | 1233 ++++++++++
 .../src/views/Zhou/FHGL_20231208135323.vue    | 1233 ++++++++++
 .../src/views/Zhou/FHGL_20231208135419.vue    | 1233 ++++++++++
 .../src/views/Zhou/FHGL_20231208135516.vue    | 1233 ++++++++++
 .../src/views/Zhou/FHGL_20231208135626.vue    | 1233 ++++++++++
 .../src/views/Zhou/FHGL_20231208135655.vue    | 1233 ++++++++++
 .../src/views/Zhou/FHGL_20231208135703.vue    | 1233 ++++++++++
 .../src/views/Zhou/FHGL_20231208135714.vue    | 1234 ++++++++++
 .../src/views/Zhou/FHGL_20231208135821.vue    | 1240 ++++++++++
 .../src/views/Zhou/FHGL_20231208135903.vue    | 1240 ++++++++++
 .../src/views/Zhou/FHGL_20231208135914.vue    | 1240 ++++++++++
 .../src/views/Zhou/FHGL_20231208135955.vue    | 1240 ++++++++++
 .../src/views/Zhou/FHGL_20231208135958.vue    | 1240 ++++++++++
 .../src/views/Zhou/FHGL_20231208140020.vue    | 1240 ++++++++++
 .../src/views/Zhou/FHGL_20231208140041.vue    | 1240 ++++++++++
 .../src/views/Zhou/FHGL_20231208140111.vue    | 1237 ++++++++++
 .../src/views/Zhou/FHGL_20231208140128.vue    | 1239 ++++++++++
 .../src/views/Zhou/FHGL_20231208140207.vue    | 1252 ++++++++++
 .../src/views/Zhou/FHGL_20231208140235.vue    | 1254 ++++++++++
 .../src/views/Zhou/FHGL_20231208140253.vue    | 1267 ++++++++++
 .../src/views/Zhou/FHGL_20231208140256.vue    | 1267 ++++++++++
 .../src/views/Zhou/FHGL_20231208140307.vue    | 1282 ++++++++++
 .../src/views/Zhou/FHGL_20231208140309.vue    | 1282 ++++++++++
 .../src/views/Zhou/FHGL_20231208140331.vue    | 1292 +++++++++++
 .../src/views/Zhou/FHGL_20231208140336.vue    | 1292 +++++++++++
 .../src/views/Zhou/FHGL_20231208140341.vue    | 1292 +++++++++++
 .../src/views/Zhou/FHGL_20231208140410.vue    | 1292 +++++++++++
 .../src/views/Zhou/FHGL_20231208140421.vue    | 1292 +++++++++++
 .../src/views/Zhou/FHGL_20231208140428.vue    | 1292 +++++++++++
 .../src/views/Zhou/NXGLNH_20231208141108.vue  | 1789 ++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141257.vue  | 1797 ++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141311.vue  | 1797 ++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141319.vue  | 1809 +++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141326.vue  | 1809 +++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141332.vue  | 1809 +++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141412.vue  | 1809 +++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141514.vue  | 1809 +++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141536.vue  | 1809 +++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141612.vue  | 1809 +++++++++++++++
 .../src/views/Zhou/NXGLNH_20231208141613.vue  | 1809 +++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143157.vue | 1276 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143256.vue | 1276 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143305.vue | 1276 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143309.vue | 1276 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143331.vue | 1284 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143337.vue | 1284 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143346.vue | 1284 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143407.vue | 1284 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143420.vue | 1284 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143455.vue | 1284 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143525.vue | 1284 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143526.vue | 1284 ++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143634.vue | 1290 +++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143641.vue | 1290 +++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143647.vue | 1290 +++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143704.vue | 1300 +++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143714.vue | 1300 +++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143751.vue | 1300 +++++++++++
 .../src/views/Zhou/TZCGLSL_20231208143752.vue | 1300 +++++++++++
 .../src/views/Zhou/TZCGL_20231208141915.vue   | 2013 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208141916.vue   | 2013 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208141941.vue   | 2021 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142038.vue   | 2021 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142154.vue   | 2017 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142228.vue   | 2017 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142249.vue   | 2017 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142328.vue   | 2018 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142351.vue   | 2023 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142407.vue   | 2043 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142426.vue   | 2043 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142443.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142534.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142545.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142554.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142604.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142656.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142745.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142828.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142840.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142850.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142851.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142901.vue   | 2053 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208142942.vue   | 2056 ++++++++++++++++
 .../src/views/Zhou/TZCGL_20231208143036.vue   | 2057 +++++++++++++++++
 src/views/Zhou/FHGL.vue                       |  114 +-
 src/views/Zhou/NXGLNH.vue                     |   27 +-
 src/views/Zhou/TZCGL.vue                      |   83 +-
 src/views/Zhou/TZCGLSL.vue                    |   52 +-
 91 files changed, 135592 insertions(+), 56 deletions(-)
 create mode 100644 .history/src/views/Zhou/FHGL_20231208134811.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208134900.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135120.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135148.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135323.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135419.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135516.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135626.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135655.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135703.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135714.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135821.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135903.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135914.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135955.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208135958.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140020.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140041.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140111.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140128.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140207.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140235.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140253.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140256.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140307.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140309.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140331.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140336.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140341.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140410.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140421.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231208140428.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141108.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141257.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141311.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141319.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141326.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141332.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141412.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141514.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141536.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141612.vue
 create mode 100644 .history/src/views/Zhou/NXGLNH_20231208141613.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143157.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143256.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143305.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143309.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143331.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143337.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143346.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143407.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143420.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143455.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143525.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143526.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143634.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143641.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143647.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143704.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143714.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143751.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208143752.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208141915.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208141916.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208141941.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142038.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142154.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142228.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142249.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142328.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142351.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142407.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142426.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142443.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142534.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142545.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142554.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142604.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142656.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142745.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142828.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142840.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142850.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142851.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142901.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208142942.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231208143036.vue

diff --git a/.history/src/views/Zhou/FHGL_20231208134811.vue b/.history/src/views/Zhou/FHGL_20231208134811.vue
new file mode 100644
index 0000000..a5dfc5e
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208134811.vue
@@ -0,0 +1,1232 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208134900.vue b/.history/src/views/Zhou/FHGL_20231208134900.vue
new file mode 100644
index 0000000..ca6bdeb
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208134900.vue
@@ -0,0 +1,1233 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          // text: ,
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135120.vue b/.history/src/views/Zhou/FHGL_20231208135120.vue
new file mode 100644
index 0000000..cc92b69
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135120.vue
@@ -0,0 +1,1234 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          // text: ,
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          text:"{sum}",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135148.vue b/.history/src/views/Zhou/FHGL_20231208135148.vue
new file mode 100644
index 0000000..4a50881
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135148.vue
@@ -0,0 +1,1233 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:"{value}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135323.vue b/.history/src/views/Zhou/FHGL_20231208135323.vue
new file mode 100644
index 0000000..94dfaad
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135323.vue
@@ -0,0 +1,1233 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum,
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135419.vue b/.history/src/views/Zhou/FHGL_20231208135419.vue
new file mode 100644
index 0000000..4f69b6d
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135419.vue
@@ -0,0 +1,1233 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"kW",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135516.vue b/.history/src/views/Zhou/FHGL_20231208135516.vue
new file mode 100644
index 0000000..c4b2071
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135516.vue
@@ -0,0 +1,1233 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei"+"kW"+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135626.vue b/.history/src/views/Zhou/FHGL_20231208135626.vue
new file mode 100644
index 0000000..f7ca118
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135626.vue
@@ -0,0 +1,1233 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+"kW"+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135655.vue b/.history/src/views/Zhou/FHGL_20231208135655.vue
new file mode 100644
index 0000000..d2ce958
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135655.vue
@@ -0,0 +1,1233 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+kW+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135703.vue b/.history/src/views/Zhou/FHGL_20231208135703.vue
new file mode 100644
index 0000000..db278eb
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135703.vue
@@ -0,0 +1,1233 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135714.vue b/.history/src/views/Zhou/FHGL_20231208135714.vue
new file mode 100644
index 0000000..e4d9e34
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135714.vue
@@ -0,0 +1,1234 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135821.vue b/.history/src/views/Zhou/FHGL_20231208135821.vue
new file mode 100644
index 0000000..0b6f3a7
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135821.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+                
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135903.vue b/.history/src/views/Zhou/FHGL_20231208135903.vue
new file mode 100644
index 0000000..7bea4bc
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135903.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: #FDBF46,
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135914.vue b/.history/src/views/Zhou/FHGL_20231208135914.vue
new file mode 100644
index 0000000..ca9c0e1
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135914.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#FDBF46",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135955.vue b/.history/src/views/Zhou/FHGL_20231208135955.vue
new file mode 100644
index 0000000..03b5969
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135955.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "##DAFFF8",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208135958.vue b/.history/src/views/Zhou/FHGL_20231208135958.vue
new file mode 100644
index 0000000..cc7ed5b
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208135958.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140020.vue b/.history/src/views/Zhou/FHGL_20231208140020.vue
new file mode 100644
index 0000000..b730dd1
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140020.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140041.vue b/.history/src/views/Zhou/FHGL_20231208140041.vue
new file mode 100644
index 0000000..27db611
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140041.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+                fontSize:32,
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140111.vue b/.history/src/views/Zhou/FHGL_20231208140111.vue
new file mode 100644
index 0000000..0296754
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140111.vue
@@ -0,0 +1,1237 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+                fontSize:32,
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140128.vue b/.history/src/views/Zhou/FHGL_20231208140128.vue
new file mode 100644
index 0000000..0b575d9
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140128.vue
@@ -0,0 +1,1239 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text:sum+"{danwei|"+danwei+"}",
+          formatter:function(value){
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich:{
+              danwei:{
+                color:"#fff",
+                fontSize:32,
+              }
+            }
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  // if(params)
+                  return (
+                    "{name|" +
+                    params.name +
+                    "}" +
+                    `\n` +
+                    "\n" +
+                    "{myStyle|" +
+                    params.value +
+                    "}" +
+                    "\t" +
+                    "{name|" +
+                    "kw" +
+                    "}"
+                  );
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // } 
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140207.vue b/.history/src/views/Zhou/FHGL_20231208140207.vue
new file mode 100644
index 0000000..e234737
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140207.vue
@@ -0,0 +1,1252 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140235.vue b/.history/src/views/Zhou/FHGL_20231208140235.vue
new file mode 100644
index 0000000..ff4391b
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140235.vue
@@ -0,0 +1,1254 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140253.vue b/.history/src/views/Zhou/FHGL_20231208140253.vue
new file mode 100644
index 0000000..ea312f4
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140253.vue
@@ -0,0 +1,1267 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140256.vue b/.history/src/views/Zhou/FHGL_20231208140256.vue
new file mode 100644
index 0000000..848f015
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140256.vue
@@ -0,0 +1,1267 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140307.vue b/.history/src/views/Zhou/FHGL_20231208140307.vue
new file mode 100644
index 0000000..1727dfd
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140307.vue
@@ -0,0 +1,1282 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140309.vue b/.history/src/views/Zhou/FHGL_20231208140309.vue
new file mode 100644
index 0000000..83f8875
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140309.vue
@@ -0,0 +1,1282 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140331.vue b/.history/src/views/Zhou/FHGL_20231208140331.vue
new file mode 100644
index 0000000..37b4840
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140331.vue
@@ -0,0 +1,1292 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle1: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle1: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140336.vue b/.history/src/views/Zhou/FHGL_20231208140336.vue
new file mode 100644
index 0000000..c8d4d25
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140336.vue
@@ -0,0 +1,1292 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle3: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140341.vue b/.history/src/views/Zhou/FHGL_20231208140341.vue
new file mode 100644
index 0000000..bca9498
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140341.vue
@@ -0,0 +1,1292 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle3: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140410.vue b/.history/src/views/Zhou/FHGL_20231208140410.vue
new file mode 100644
index 0000000..c082d60
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140410.vue
@@ -0,0 +1,1292 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle3: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140421.vue b/.history/src/views/Zhou/FHGL_20231208140421.vue
new file mode 100644
index 0000000..d72d41c
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140421.vue
@@ -0,0 +1,1292 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle3: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231208140428.vue b/.history/src/views/Zhou/FHGL_20231208140428.vue
new file mode 100644
index 0000000..7c8741d
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231208140428.vue
@@ -0,0 +1,1292 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle3: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141108.vue b/.history/src/views/Zhou/NXGLNH_20231208141108.vue
new file mode 100644
index 0000000..905ef81
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141108.vue
@@ -0,0 +1,1789 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            console.log(name);
+                            return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141257.vue b/.history/src/views/Zhou/NXGLNH_20231208141257.vue
new file mode 100644
index 0000000..123997c
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141257.vue
@@ -0,0 +1,1797 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}}{num|%}`;
+                            }else if(name=="煤磨系统"){
+
+                            }else if(name=="生料系统"){
+
+                            }else{
+                                
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141311.vue b/.history/src/views/Zhou/NXGLNH_20231208141311.vue
new file mode 100644
index 0000000..e8b3bc2
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141311.vue
@@ -0,0 +1,1797 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}}{num|%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}}{num|%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}}{num|%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}}{num|%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141319.vue b/.history/src/views/Zhou/NXGLNH_20231208141319.vue
new file mode 100644
index 0000000..161d627
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141319.vue
@@ -0,0 +1,1809 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}}{num|%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}}{num|%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}}{num|%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}}{num|%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                            num1: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                            num1: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                            num1: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141326.vue b/.history/src/views/Zhou/NXGLNH_20231208141326.vue
new file mode 100644
index 0000000..cb371aa
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141326.vue
@@ -0,0 +1,1809 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}}{num|%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}}{num|%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}}{num|%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}}{num|%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                            num3: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                            num4: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141332.vue b/.history/src/views/Zhou/NXGLNH_20231208141332.vue
new file mode 100644
index 0000000..700efef
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141332.vue
@@ -0,0 +1,1809 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}}{num|%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}}{num|%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}}{num|%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}}{num|%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141412.vue b/.history/src/views/Zhou/NXGLNH_20231208141412.vue
new file mode 100644
index 0000000..0163520
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141412.vue
@@ -0,0 +1,1809 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}}{num|%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}}{num|%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}}{num|%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}}{num|%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141514.vue b/.history/src/views/Zhou/NXGLNH_20231208141514.vue
new file mode 100644
index 0000000..12e1967
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141514.vue
@@ -0,0 +1,1809 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}\t\t\t%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}}{num2|%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}}{num|%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}}{num|%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141536.vue b/.history/src/views/Zhou/NXGLNH_20231208141536.vue
new file mode 100644
index 0000000..38ce6c4
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141536.vue
@@ -0,0 +1,1809 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 100,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141612.vue b/.history/src/views/Zhou/NXGLNH_20231208141612.vue
new file mode 100644
index 0000000..2889830
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141612.vue
@@ -0,0 +1,1809 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231208141613.vue b/.history/src/views/Zhou/NXGLNH_20231208141613.vue
new file mode 100644
index 0000000..2889830
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231208141613.vue
@@ -0,0 +1,1809 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
+            <div class="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date3" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" label="运行功率" align="center">
+                                <template scope="scope">
+                                    <span class="count">{{ scope.row.date3 }}</span>
+                                    <span class="danwei">kW</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+            <div class="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统耗能',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             // 会canvas的应该都能看得懂，shape是从custom传入的
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             // console.log(shape);
+        //             const c0 = [shape.x, shape.y];
+        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
+        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        //             ctx
+        //                 .moveTo(c0[0], c0[1])
+        //                 .lineTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制右侧面
+        //     const CubeRight = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const xAxisPoint = shape.xAxisPoint;
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 绘制顶面
+        //     const CubeTop = this.$echarts.graphic.extendShape({
+        //         shape: {
+        //             x: 0,
+        //             y: 0,
+        //         },
+        //         buildPath: function (ctx, shape) {
+        //             const c1 = [shape.x, shape.y];
+        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+        //             // const c3 = [shape.x, shape.y - offsetX];
+        //             const c3 = [shape.x, shape.y - offsetY * 2];
+        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
+        //             ctx
+        //                 .moveTo(c1[0], c1[1])
+        //                 .lineTo(c2[0], c2[1])
+        //                 .lineTo(c3[0], c3[1])
+        //                 .lineTo(c4[0], c4[1])
+        //                 .closePath();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         children: [
+        //                             {
+        //                                 type: "CubeLeft",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeRight",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 type: "CubeTop",
+        //                                 shape: {
+        //                                     api,
+        //                                     xValue: api.value(0),
+        //                                     yValue: api.value(1),
+        //                                     x: location[0],
+        //                                     y: location[1],
+        //                                     xAxisPoint: api.coord([api.value(0), 0]),
+        //                                 },
+        //                                 style: {
+        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                                         {
+        //                                             offset: 0,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+}
+
+.left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    height: 38px;
+                    margin: 10px;
+                    display: block;
+                    line-height: 38px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+
+                .active {
+                    background: linear-gradient(to right,
+                            rgba(33, 76, 124, 0.3) 20%,
+                            rgba(152, 207, 230, 0.3) 100%,
+                            rgba(33, 76, 124, 0.3) 20%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        position: relative;
+        margin-top: 128px;
+
+        .imgBox4 {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉eltable的hover效果
+                .el-table tbody tr:hover>td {
+                    background-color: #0b679e !important;
+                }
+
+                //修改表头颜色
+                .has-gutter {
+                    background-color: #1969a8;
+
+                    th {
+                        background-color: #1969a8;
+                    }
+                }
+
+                //奇偶行颜色
+                .el-table .success-row {
+                    background: #184167;
+                }
+
+                //去掉边框白线
+                .el-table__row>td {
+                    border: none;
+                }
+
+                .el-table::before {
+                    height: 0px;
+                }
+
+                /* 移除表头的下边框 */
+                .el-table__header th {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                height: 38px;
+                margin: 10px;
+                display: block;
+                line-height: 38px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .active {
+                background: linear-gradient(to right,
+                        rgba(33, 76, 124, 0.3) 20%,
+                        rgba(152, 207, 230, 0.3) 100%,
+                        rgba(33, 76, 124, 0.3) 20%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143157.vue b/.history/src/views/Zhou/TZCGLSL_20231208143157.vue
new file mode 100644
index 0000000..b590ce6
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143157.vue
@@ -0,0 +1,1276 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+        //                 selected: {
+        //     '1号生产线': {x: 760, y: 10},
+        //     '2号生产线': {x: 760, y: 70},
+        //     '3号生产线': {x: 760, y: 110},
+        // },
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num|${item.value}}\t\t{name|tCO2}`;
+                        // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+                    }),
+                    textStyle: {
+                        color: "#",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num: {
+                                fontSize: 32,
+                                // color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143256.vue b/.history/src/views/Zhou/TZCGLSL_20231208143256.vue
new file mode 100644
index 0000000..94a0aa9
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143256.vue
@@ -0,0 +1,1276 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num: {
+                                fontSize: 32,
+                                // color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143305.vue b/.history/src/views/Zhou/TZCGLSL_20231208143305.vue
new file mode 100644
index 0000000..4ab53b0
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143305.vue
@@ -0,0 +1,1276 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num: {
+                                fontSize: 32,
+                                // color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143309.vue b/.history/src/views/Zhou/TZCGLSL_20231208143309.vue
new file mode 100644
index 0000000..79cf2ed
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143309.vue
@@ -0,0 +1,1276 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num: {
+                                fontSize: 32,
+                                // color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143331.vue b/.history/src/views/Zhou/TZCGLSL_20231208143331.vue
new file mode 100644
index 0000000..9da853b
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143331.vue
@@ -0,0 +1,1284 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                            num1: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                            num1: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143337.vue b/.history/src/views/Zhou/TZCGLSL_20231208143337.vue
new file mode 100644
index 0000000..db0110d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143337.vue
@@ -0,0 +1,1284 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143346.vue b/.history/src/views/Zhou/TZCGLSL_20231208143346.vue
new file mode 100644
index 0000000..1f0d0ff
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143346.vue
@@ -0,0 +1,1284 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143407.vue b/.history/src/views/Zhou/TZCGLSL_20231208143407.vue
new file mode 100644
index 0000000..1d0b84d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143407.vue
@@ -0,0 +1,1284 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143420.vue b/.history/src/views/Zhou/TZCGLSL_20231208143420.vue
new file mode 100644
index 0000000..1d0b84d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143420.vue
@@ -0,0 +1,1284 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143455.vue b/.history/src/views/Zhou/TZCGLSL_20231208143455.vue
new file mode 100644
index 0000000..d9e1b9d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143455.vue
@@ -0,0 +1,1284 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143525.vue b/.history/src/views/Zhou/TZCGLSL_20231208143525.vue
new file mode 100644
index 0000000..d9e1b9d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143525.vue
@@ -0,0 +1,1284 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143526.vue b/.history/src/views/Zhou/TZCGLSL_20231208143526.vue
new file mode 100644
index 0000000..d9e1b9d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143526.vue
@@ -0,0 +1,1284 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143634.vue b/.history/src/views/Zhou/TZCGLSL_20231208143634.vue
new file mode 100644
index 0000000..25ce966
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143634.vue
@@ -0,0 +1,1290 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+
+                                }else{
+                                    
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143641.vue b/.history/src/views/Zhou/TZCGLSL_20231208143641.vue
new file mode 100644
index 0000000..f8a93a6
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143641.vue
@@ -0,0 +1,1290 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143647.vue b/.history/src/views/Zhou/TZCGLSL_20231208143647.vue
new file mode 100644
index 0000000..0e62b67
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143647.vue
@@ -0,0 +1,1290 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143704.vue b/.history/src/views/Zhou/TZCGLSL_20231208143704.vue
new file mode 100644
index 0000000..c4325bb
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143704.vue
@@ -0,0 +1,1300 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143714.vue b/.history/src/views/Zhou/TZCGLSL_20231208143714.vue
new file mode 100644
index 0000000..5730375
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143714.vue
@@ -0,0 +1,1300 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="一号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="二号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[2],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143751.vue b/.history/src/views/Zhou/TZCGLSL_20231208143751.vue
new file mode 100644
index 0000000..4eed4d5
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143751.vue
@@ -0,0 +1,1300 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208143752.vue b/.history/src/views/Zhou/TZCGLSL_20231208143752.vue
new file mode 100644
index 0000000..4eed4d5
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208143752.vue
@@ -0,0 +1,1300 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGL_20231208141915.vue b/.history/src/views/Zhou/TZCGL_20231208141915.vue
new file mode 100644
index 0000000..64d8da7
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208141915.vue
@@ -0,0 +1,2013 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+        "#ffe000",
+        "#ffa800",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}}{num|t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}}{num|t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}}{num|t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208141916.vue b/.history/src/views/Zhou/TZCGL_20231208141916.vue
new file mode 100644
index 0000000..64d8da7
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208141916.vue
@@ -0,0 +1,2013 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+        "#ffe000",
+        "#ffa800",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}}{num|t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}}{num|t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}}{num|t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208141941.vue b/.history/src/views/Zhou/TZCGL_20231208141941.vue
new file mode 100644
index 0000000..01028df
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208141941.vue
@@ -0,0 +1,2021 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+        "#ffe000",
+        "#ffa800",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}}{num|t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}}{num|t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}}{num|t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num1: {
+                fontSize: 28,
+                color: color[1],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[2],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142038.vue b/.history/src/views/Zhou/TZCGL_20231208142038.vue
new file mode 100644
index 0000000..ae8e9e8
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142038.vue
@@ -0,0 +1,2021 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+        "#ffe000",
+        "#ffa800",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num1: {
+                fontSize: 28,
+                color: color[1],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[2],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142154.vue b/.history/src/views/Zhou/TZCGL_20231208142154.vue
new file mode 100644
index 0000000..666bf38
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142154.vue
@@ -0,0 +1,2017 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num1: {
+                fontSize: 28,
+                color: color[1],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[2],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142228.vue b/.history/src/views/Zhou/TZCGL_20231208142228.vue
new file mode 100644
index 0000000..626e2fe
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142228.vue
@@ -0,0 +1,2017 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[1],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[2],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142249.vue b/.history/src/views/Zhou/TZCGL_20231208142249.vue
new file mode 100644
index 0000000..9d24c94
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142249.vue
@@ -0,0 +1,2017 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142328.vue b/.history/src/views/Zhou/TZCGL_20231208142328.vue
new file mode 100644
index 0000000..6a3210a
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142328.vue
@@ -0,0 +1,2018 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142351.vue b/.history/src/views/Zhou/TZCGL_20231208142351.vue
new file mode 100644
index 0000000..4c56b91
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142351.vue
@@ -0,0 +1,2023 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+
+              }else{
+                
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142407.vue b/.history/src/views/Zhou/TZCGL_20231208142407.vue
new file mode 100644
index 0000000..1955507
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142407.vue
@@ -0,0 +1,2043 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142426.vue b/.history/src/views/Zhou/TZCGL_20231208142426.vue
new file mode 100644
index 0000000..7c8f02c
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142426.vue
@@ -0,0 +1,2043 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142443.vue b/.history/src/views/Zhou/TZCGL_20231208142443.vue
new file mode 100644
index 0000000..954a6b6
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142443.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 40,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142534.vue b/.history/src/views/Zhou/TZCGL_20231208142534.vue
new file mode 100644
index 0000000..4fd5747
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142534.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 30,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142545.vue b/.history/src/views/Zhou/TZCGL_20231208142545.vue
new file mode 100644
index 0000000..e121a4c
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142545.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 20,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142554.vue b/.history/src/views/Zhou/TZCGL_20231208142554.vue
new file mode 100644
index 0000000..951e2ea
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142554.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 10,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142604.vue b/.history/src/views/Zhou/TZCGL_20231208142604.vue
new file mode 100644
index 0000000..9cee477
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142604.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142656.vue b/.history/src/views/Zhou/TZCGL_20231208142656.vue
new file mode 100644
index 0000000..5d1188a
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142656.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142745.vue b/.history/src/views/Zhou/TZCGL_20231208142745.vue
new file mode 100644
index 0000000..ef4c546
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142745.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142828.vue b/.history/src/views/Zhou/TZCGL_20231208142828.vue
new file mode 100644
index 0000000..9ac01d9
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142828.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: true, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142840.vue b/.history/src/views/Zhou/TZCGL_20231208142840.vue
new file mode 100644
index 0000000..ef4c546
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142840.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142850.vue b/.history/src/views/Zhou/TZCGL_20231208142850.vue
new file mode 100644
index 0000000..d5fb4af
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142850.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: 0, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142851.vue b/.history/src/views/Zhou/TZCGL_20231208142851.vue
new file mode 100644
index 0000000..d5fb4af
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142851.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: 0, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142901.vue b/.history/src/views/Zhou/TZCGL_20231208142901.vue
new file mode 100644
index 0000000..9ac01d9
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142901.vue
@@ -0,0 +1,2053 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: true, // 设置刻度点连续显示
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208142942.vue b/.history/src/views/Zhou/TZCGL_20231208142942.vue
new file mode 100644
index 0000000..1eebc85
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208142942.vue
@@ -0,0 +1,2056 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: true, // 设置刻度点连续显示
+          },
+          axisLine:{
+            show:false,
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231208143036.vue b/.history/src/views/Zhou/TZCGL_20231208143036.vue
new file mode 100644
index 0000000..72bb401
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231208143036.vue
@@ -0,0 +1,2057 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/碳图标.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
+      <div class="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+          axisLine:{
+            show:false,
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Zhou/FHGL.vue b/src/views/Zhou/FHGL.vue
index 831f177..7c8741d 100644
--- a/src/views/Zhou/FHGL.vue
+++ b/src/views/Zhou/FHGL.vue
@@ -162,7 +162,18 @@ export default {
         xAxis: {
           type: "category",
           // boundaryGap: false,
-          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
           axisLine: {
             show: true,
           },
@@ -226,7 +237,7 @@ export default {
             type: "line",
             symbol: "circle",
             symbolSize: 20,
-            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
             lineStyle: {
               width: 5,
               color: "#3FFF5A",
@@ -241,7 +252,7 @@ export default {
             // stack: 'Total',
             symbol: "circle",
             symbolSize: 20,
-            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
             lineStyle: {
               width: 5,
               color: "#43FFF4",
@@ -303,6 +314,7 @@ export default {
         },
       ];
       const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
       const gap = (1 * sum) / 100;
       const pieData1 = [];
       const gapData = {
@@ -322,16 +334,25 @@ export default {
       let option = {
         title: {
           show: true,
-          text: "1694kW",
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
           subtext: "总负荷",
           x: "39.5%",
           y: "43%",
           itemGap: 6,
           textStyle: {
-            color: "#fff",
-            fontSize: 30,
+            color: "#DAFFF8",
+            fontSize: 50,
             fontWeight: "400",
             lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
           },
           subtextStyle: {
             color: "#fff",
@@ -355,23 +376,53 @@ export default {
               formatter: function (params) {
                 console.log(params.dataIndex);
                 if (params.name) {
-                  // const col = color[params.dataIndex];
-                  // 样式可以根据需要进行调整
-                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
-                  return (
-                    "{name|" +
-                    params.name +
-                    "}" +
-                    `\n` +
-                    "\n" +
-                    "{myStyle|" +
-                    params.value +
-                    "}" +
-                    "\t" +
-                    "{name|" +
-                    "kw" +
-                    "}"
-                  );
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
                 }
               },
               rich: {
@@ -379,11 +430,21 @@ export default {
                   color: "#fff",
                   fontSize: 28,
                 },
-                myStyle: {
+                myStyle1: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
                   color: color[0],
                   fontWeight: "bold",
                   fontSize: 40,
                 },
+                myStyle3: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
               },
             },
             labelLine: {
@@ -410,7 +471,7 @@ export default {
               // 这里需要进行修改
               // formatter: function (params) {
               //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
-              // } 
+              // }
             },
             labelLine: {
               //label线的长度
@@ -729,7 +790,8 @@ export default {
 .box {
   width: 100%;
   height: 100%;
-   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
   //   background-color: transparent;
   padding-top: 400px;
   box-sizing: border-box;
diff --git a/src/views/Zhou/NXGLNH.vue b/src/views/Zhou/NXGLNH.vue
index 1b464fa..2889830 100644
--- a/src/views/Zhou/NXGLNH.vue
+++ b/src/views/Zhou/NXGLNH.vue
@@ -385,7 +385,7 @@ export default {
                         },
                         labelLine: {
                             length: 30,
-                            length2: 100,
+                            length2: 80,
                             show: true,
                             color: '#00ffff'
                         }
@@ -457,7 +457,16 @@ export default {
                         console.log(item);
                         percent = ((item.value / total) * 100).toFixed(2);
                         if (name !== '') {
-                            return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
                             // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
                         } else {
                             return '';
@@ -473,9 +482,21 @@ export default {
                                 fontSize: 24,
                                 color: "#fff",
                             },
-                            num: {
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
                                 fontSize: 28,
                                 color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
                             }
                         },
                     },
diff --git a/src/views/Zhou/TZCGL.vue b/src/views/Zhou/TZCGL.vue
index 064ba36..72bb401 100644
--- a/src/views/Zhou/TZCGL.vue
+++ b/src/views/Zhou/TZCGL.vue
@@ -269,7 +269,11 @@ export default {
             "15:20",
           ],
           axisTick: {
-            interval: false, // 设置刻度点连续显示
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+          axisLine:{
+            show:false,
           },
           axisLabel: {
             show: true,
@@ -333,7 +337,7 @@ export default {
               },
             },
             markPoint: {
-              data: [{ type: "max", name: "Max" }],
+              // data: [{ type: "max", name: "Max" }],
               label: {
                 textStyle: {
                   color: "#fff",
@@ -641,10 +645,6 @@ export default {
         "#7EFAB7",
         "#55A9CE",
         "#53DCF1",
-        "#ffe000",
-        "#ffa800",
-        "#ff5b00",
-        "#ff3000",
       ];
       trafficWay.forEach((item, index) => {
         data.push(
@@ -662,7 +662,7 @@ export default {
             },
           },
           {
-            value: 40,
+            value: 15,
             name: "",
             itemStyle: {
               normal: {
@@ -691,8 +691,9 @@ export default {
             }
             percent = ((params.value / total) * 100).toFixed(0);
             if (params.name !== "") {
+              if(params.name=="原煤"){
               return (
-                "{colors|" +
+                "{colors1|" +
                 percent +
                 "%" +
                 "}" +
@@ -702,12 +703,47 @@ export default {
                 params.name +
                 "}"
               );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
             } else {
               return "";
             }
           },
           rich: {
-            colors: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
               color: color[1],
               fontSize: 40,
               align: "left",
@@ -799,10 +835,23 @@ export default {
           align: "left",
           formatter: (name) => {
             const item = trafficWay.filter((item) => item.name === name)[0];
-            return (
+            if(name=="原煤"){
+              return (
               `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
-              `{num|${item.value}}{num|t}`
+              `{num1|${item.value}t}`
             );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
             // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
           },
           textStyle: {
@@ -812,7 +861,15 @@ export default {
                 fontSize: 24,
                 color: "#fff",
               },
-              num: {
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
                 fontSize: 28,
                 color: color[1],
               },
@@ -901,7 +958,7 @@ export default {
       let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
       let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
       //拿到最大值
-      const maxValue = Math.max(...seriesData);
+      // const maxValue = Math.max(...seriesData);
 
       let colorArr = [
         ["#0A67FF"],
diff --git a/src/views/Zhou/TZCGLSL.vue b/src/views/Zhou/TZCGLSL.vue
index b590ce6..4eed4d5 100644
--- a/src/views/Zhou/TZCGLSL.vue
+++ b/src/views/Zhou/TZCGLSL.vue
@@ -582,7 +582,7 @@ export default {
                 value: 171.49
             }];
             var data = [];
-            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
             for (var i = 0; i < trafficWay.length; i++) {
                 data.push({
                     value: trafficWay[i].value,
@@ -634,13 +634,29 @@ export default {
                                 }
                                 percent = ((params.value / total) * 100).toFixed(0);
                                 if (params.name !== '') {
-                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
-                                } else {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
                                     return '';
                                 }
                             },
                             rich: {
-                                colors: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
                                     color: color[1],
                                     fontSize: 40,
                                     align: "left",
@@ -712,29 +728,37 @@ export default {
                             name: '3号生产线',
                             value: "13.68"
                         }],
-        //                 selected: {
-        //     '1号生产线': {x: 760, y: 10},
-        //     '2号生产线': {x: 760, y: 70},
-        //     '3号生产线': {x: 760, y: 110},
-        // },
                     left: 760,
                     bottom: 120,
                     align: 'left',
                     formatter: ((name) => {
                         const item = trafficWay.filter((item) => item.name === name)[0];
-                        return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num|${item.value}}\t\t{name|tCO2}`;
-                        // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
                     }),
                     textStyle: {
-                        color: "#",
+                        color: "#fff",
                         rich: {
                             name: {
                                 fontSize: 28,
                                 // color: "#fff",
                             },
-                            num: {
+                            num1: {
                                 fontSize: 32,
-                                // color: color[1],
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
                             }
                         },
                     },