From 973b9eda8fd0458376ba11be66bb49ce39d3aaf7 Mon Sep 17 00:00:00 2001
From: unknown <1535852499@qq.com>
Date: Tue, 5 Dec 2023 18:06:54 +0800
Subject: [PATCH] zyh

---
 .../src/views/Zhou/NXGL_20231205163945.vue    | 1619 +++++++++
 .../src/views/Zhou/NXGL_20231205164136.vue    | 1619 +++++++++
 .../src/views/Zhou/NXGL_20231205164415.vue    | 1619 +++++++++
 .../src/views/Zhou/NXGL_20231205164441.vue    | 1619 +++++++++
 .../src/views/Zhou/NXGL_20231205164455.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205164459.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205164502.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205164606.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205164627.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205164629.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205164631.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205164738.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205164909.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205165103.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205165116.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205165149.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205165155.vue    | 1579 ++++++++
 .../src/views/Zhou/NXGL_20231205165241.vue    | 1685 +++++++++
 .../src/views/Zhou/NXGL_20231205165421.vue    | 1685 +++++++++
 .../src/views/Zhou/NXGL_20231205165430.vue    | 1685 +++++++++
 .../src/views/Zhou/NXGL_20231205165527.vue    | 1685 +++++++++
 .../src/views/Zhou/NXGL_20231205165731.vue    | 1685 +++++++++
 .../src/views/Zhou/NXGL_20231205165819.vue    | 1685 +++++++++
 .../src/views/Zhou/NXGL_20231205165849.vue    | 1686 +++++++++
 .../src/views/Zhou/NXGL_20231205165931.vue    | 1686 +++++++++
 .../src/views/Zhou/NXGL_20231205170050.vue    | 1686 +++++++++
 .../src/views/Zhou/NXGL_20231205170101.vue    | 1686 +++++++++
 .../src/views/Zhou/NXGL_20231205170111.vue    | 1686 +++++++++
 .../src/views/Zhou/NXGL_20231205170129.vue    | 1685 +++++++++
 .../src/views/Zhou/NXGL_20231205170328.vue    | 1685 +++++++++
 .../src/views/Zhou/NXGL_20231205170329.vue    | 1685 +++++++++
 .../src/views/Zhou/TZCGL_20231205173431.vue   | 1704 +++++++++
 .../src/views/Zhou/TZCGL_20231205173511.vue   | 1704 +++++++++
 .../src/views/Zhou/TZCGL_20231205173515.vue   | 1704 +++++++++
 .../src/views/Zhou/TZCGL_20231205173536.vue   | 1704 +++++++++
 .../src/views/Zhou/TZCGL_20231205173614.vue   | 1704 +++++++++
 .../src/views/Zhou/TZCGL_20231205173750.vue   | 1704 +++++++++
 .../src/views/Zhou/TZCGL_20231205173759.vue   | 1704 +++++++++
 .../src/views/Zhou/TZCGL_20231205173825.vue   | 1704 +++++++++
 .../src/views/Zhou/TZCGL_20231205174027.vue   | 1725 +++++++++
 .../src/views/Zhou/TZCGL_20231205174050.vue   | 1725 +++++++++
 .../src/views/Zhou/TZCGL_20231205174113.vue   | 1725 +++++++++
 .../src/views/Zhou/TZCGL_20231205174120.vue   | 1725 +++++++++
 .../src/views/Zhou/TZCGL_20231205174124.vue   | 1726 +++++++++
 .../src/views/Zhou/TZCGL_20231205174127.vue   | 1727 +++++++++
 .../src/views/Zhou/TZCGL_20231205174130.vue   | 1728 +++++++++
 .../src/views/Zhou/TZCGL_20231205174134.vue   | 1729 +++++++++
 .../src/views/Zhou/TZCGL_20231205174202.vue   | 1729 +++++++++
 .../src/views/Zhou/TZCGL_20231205174216.vue   | 1729 +++++++++
 .../src/views/Zhou/TZCGL_20231205174223.vue   | 1729 +++++++++
 src/views/Zhou/NXGL.vue                       | 3210 +++++++++--------
 src/views/Zhou/TZCGL.vue                      |   33 +-
 52 files changed, 84894 insertions(+), 1576 deletions(-)
 create mode 100644 .history/src/views/Zhou/NXGL_20231205163945.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164136.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164415.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164441.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164455.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164459.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164502.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164606.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164627.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164629.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164631.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164738.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205164909.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165103.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165116.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165149.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165155.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165241.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165421.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165430.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165527.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165731.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165819.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165849.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205165931.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205170050.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205170101.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205170111.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205170129.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205170328.vue
 create mode 100644 .history/src/views/Zhou/NXGL_20231205170329.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205173431.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205173511.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205173515.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205173536.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205173614.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205173750.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205173759.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205173825.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174027.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174050.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174113.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174120.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174124.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174127.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174130.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174134.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174202.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174216.vue
 create mode 100644 .history/src/views/Zhou/TZCGL_20231205174223.vue

diff --git a/.history/src/views/Zhou/NXGL_20231205163945.vue b/.history/src/views/Zhou/NXGL_20231205163945.vue
new file mode 100644
index 0000000..15b5353
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205163945.vue
@@ -0,0 +1,1619 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#4915E6'
+                }, {
+                    offset: 1,
+                    color: '#4915E6'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#00FFFF'
+                }, {
+                    offset: 0.5,
+                    color: '#00FFFF'
+                }, {
+                    offset: 0.5,
+                    color: '#11A6D0'
+                }, {
+                    offset: 1,
+                    color: '#11A6D0'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#48DD12'
+                }, {
+                    offset: 1,
+                    color: '#48DD12'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF7853'
+                }, {
+                    offset: 0.5,
+                    color: '#FF7853'
+                }, {
+                    offset: 0.5,
+                    color: '#DB3E13'
+                }, {
+                    offset: 1,
+                    color: '#DB3E13'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#AA48FF'
+                }, {
+                    offset: 0.5,
+                    color: '#AA48FF'
+                }, {
+                    offset: 0.5,
+                    color: '#8E15F8'
+                }, {
+                    offset: 1,
+                    color: '#8E15F8'
+                }]
+            }
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164136.vue b/.history/src/views/Zhou/NXGL_20231205164136.vue
new file mode 100644
index 0000000..0459aef
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164136.vue
@@ -0,0 +1,1619 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#00FFFF'
+                }, {
+                    offset: 0.5,
+                    color: '#00FFFF'
+                }, {
+                    offset: 0.5,
+                    color: '#11A6D0'
+                }, {
+                    offset: 1,
+                    color: '#11A6D0'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#48DD12'
+                }, {
+                    offset: 1,
+                    color: '#48DD12'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF7853'
+                }, {
+                    offset: 0.5,
+                    color: '#FF7853'
+                }, {
+                    offset: 0.5,
+                    color: '#DB3E13'
+                }, {
+                    offset: 1,
+                    color: '#DB3E13'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#AA48FF'
+                }, {
+                    offset: 0.5,
+                    color: '#AA48FF'
+                }, {
+                    offset: 0.5,
+                    color: '#8E15F8'
+                }, {
+                    offset: 1,
+                    color: '#8E15F8'
+                }]
+            }
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164415.vue b/.history/src/views/Zhou/NXGL_20231205164415.vue
new file mode 100644
index 0000000..6289486
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164415.vue
@@ -0,0 +1,1619 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#11A6D0'
+                }, {
+                    offset: 1,
+                    color: '#11A6D0'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#48DD12'
+                }, {
+                    offset: 1,
+                    color: '#48DD12'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF7853'
+                }, {
+                    offset: 0.5,
+                    color: '#FF7853'
+                }, {
+                    offset: 0.5,
+                    color: '#DB3E13'
+                }, {
+                    offset: 1,
+                    color: '#DB3E13'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#AA48FF'
+                }, {
+                    offset: 0.5,
+                    color: '#AA48FF'
+                }, {
+                    offset: 0.5,
+                    color: '#8E15F8'
+                }, {
+                    offset: 1,
+                    color: '#8E15F8'
+                }]
+            }
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164441.vue b/.history/src/views/Zhou/NXGL_20231205164441.vue
new file mode 100644
index 0000000..a94f2f7
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164441.vue
@@ -0,0 +1,1619 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#48DD12'
+                }, {
+                    offset: 1,
+                    color: '#48DD12'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF7853'
+                }, {
+                    offset: 0.5,
+                    color: '#FF7853'
+                }, {
+                    offset: 0.5,
+                    color: '#DB3E13'
+                }, {
+                    offset: 1,
+                    color: '#DB3E13'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#AA48FF'
+                }, {
+                    offset: 0.5,
+                    color: '#AA48FF'
+                }, {
+                    offset: 0.5,
+                    color: '#8E15F8'
+                }, {
+                    offset: 1,
+                    color: '#8E15F8'
+                }]
+            }
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164455.vue b/.history/src/views/Zhou/NXGL_20231205164455.vue
new file mode 100644
index 0000000..5618b10
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164455.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#48DD12'
+                }, {
+                    offset: 1,
+                    color: '#48DD12'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164459.vue b/.history/src/views/Zhou/NXGL_20231205164459.vue
new file mode 100644
index 0000000..c437631
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164459.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#48DD12'
+                }, {
+                    offset: 1,
+                    color: '#48DD12'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    // backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164502.vue b/.history/src/views/Zhou/NXGL_20231205164502.vue
new file mode 100644
index 0000000..5618b10
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164502.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#89FF5E'
+                }, {
+                    offset: 0.5,
+                    color: '#48DD12'
+                }, {
+                    offset: 1,
+                    color: '#48DD12'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164606.vue b/.history/src/views/Zhou/NXGL_20231205164606.vue
new file mode 100644
index 0000000..f8acea2
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164606.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#FFD05C'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164627.vue b/.history/src/views/Zhou/NXGL_20231205164627.vue
new file mode 100644
index 0000000..fa7193b
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164627.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#DEA821'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164629.vue b/.history/src/views/Zhou/NXGL_20231205164629.vue
new file mode 100644
index 0000000..348886a
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164629.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 1,
+                    color: '#DEA821'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164631.vue b/.history/src/views/Zhou/NXGL_20231205164631.vue
new file mode 100644
index 0000000..9813976
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164631.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 1,
+                    color: '#02CFCD'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164738.vue b/.history/src/views/Zhou/NXGL_20231205164738.vue
new file mode 100644
index 0000000..012b9a0
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164738.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 1,
+                    color: '#02CFCD'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0].colorStops[0];
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205164909.vue b/.history/src/views/Zhou/NXGL_20231205164909.vue
new file mode 100644
index 0000000..bff3340
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205164909.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#FF3FDA'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 1,
+                    color: '#02CFCD'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205165103.vue b/.history/src/views/Zhou/NXGL_20231205165103.vue
new file mode 100644
index 0000000..844ac27
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165103.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFB41D'
+                }, {
+                    offset: 0.5,
+                    color: '#FFB41D'
+                }, {
+                    offset: 0.5,
+                    color: '#CC1BAA'
+                }, {
+                    offset: 1,
+                    color: '#CC1BAA'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 1,
+                    color: '#02CFCD'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205165116.vue b/.history/src/views/Zhou/NXGL_20231205165116.vue
new file mode 100644
index 0000000..ecc3a74
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165116.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFB41D'
+                }, {
+                    offset: 0.5,
+                    color: '#FFB41D'
+                }, {
+                    offset: 0.5,
+                    color: '#927719'
+                }, {
+                    offset: 1,
+                    color: '#927719'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 1,
+                    color: '#02CFCD'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205165149.vue b/.history/src/views/Zhou/NXGL_20231205165149.vue
new file mode 100644
index 0000000..4d83058
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165149.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFB41D'
+                }, {
+                    offset: 0.5,
+                    color: '#FFB41D'
+                }, {
+                    offset: 0.5,
+                    color: '#927719'
+                }, {
+                    offset: 1,
+                    color: '#927719'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 1,
+                    color: '#02CFCD'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        // color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205165155.vue b/.history/src/views/Zhou/NXGL_20231205165155.vue
new file mode 100644
index 0000000..ecc3a74
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165155.vue
@@ -0,0 +1,1579 @@
+<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="nylx">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能源流向</p>
+                </div>
+                <div id="nylx"></div>
+            </div>
+            <div class="ffl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>复费率</p>
+                </div>
+                <div id="ffl"></div>
+            </div>
+            <div class="nxdb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能效对标（定额管理）</p>
+                </div>
+                <div id="nxdb">
+                    <div class="table">
+                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
+                            header-cell-style="background-color: #1969A8; color: white">
+                            <el-table-column prop="date1" label="" align="center" width="480">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="先进值" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date3" label="企业" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date4" label="同比" align="center">
+                                <template scope="scope">
+                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="jnl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>节能量（节电率）</p>
+                </div>
+                <div class="chartBox">
+                    <div id="jnl">
+                        <img src="../../assets/NXGL/r1.png" alt="" />
+                        <div class="zx">
+                            <span>节能量（节电率）:</span>
+                        </div>
+                        <div class="span_jnl">
+                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dfdj">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>电费电价</p>
+                </div>
+                <div class="chartBox">
+                    <div id="dfdj">
+
+                    </div>
+                </div>
+            </div>
+            <div class="sbyxqk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>设备运行情况</p>
+                </div>
+                <div id="sbyxqk">
+                    <div class="table">
+                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                            </el-table-column>
+                            <el-table-column prop="date2" label="开关状态" align="center">
+                                <template scope="scope">
+                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
+                                    <img src="../../assets/KDFH/jinggao.png" v-else />
+                                </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            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: {
+                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
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 20,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "原始值折标煤", target: "水", value: 800 },
+                        { source: "原始值折标煤", target: "电", value: 800 },
+                        { source: "原始值折标煤", target: "余热发电", value: 800 },
+                        { source: "原始值折标煤", target: "煤", value: 800 },
+                        // L1→L2→L3	 2404
+                        { source: "煤", target: "11", value: 200 },
+                        { source: "煤", target: "22", value: 200 },
+                        { source: "煤", target: "33", value: 200 },
+                        { source: "余热发电", target: "1", value: 200 },
+                        { source: "余热发电", target: "2", value: 200 },
+                        { source: "余热发电", target: "3", value: 200 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理");
+            this.$router.push('/nxglnh');
+        },
+        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 "";
+        },
+        // dfdj() {
+        //     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月"];
+        //     let seriesData = [34, 36, 48, 13, 38];
+        //     //拿到最大值
+        //     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: "单位:kWh",
+        //             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%'],
+        //         }, {
+        //             show: true,
+        //         }],
+        //         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: true,
+        //                         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("dfdj", option);
+        // },
+        dfdj2() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['1月', '2月', '3月', '4月', '5月'],
+                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+                disinfeced: [32, 34, 48, 14, 38],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+
+            const legend = {
+                data: [
+                    {
+                        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",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: 0,
+                max: 1,
+                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: {
+                            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)' }]
+                        }
+                    },
+                }, {
+                    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)'
+                    },
+                }, {
+                    z: 1,
+                    stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                }, {
+                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 16, color: '#ffd11a' }
+                    },
+                    data: dataArr.rateData
+                }]
+            let option = { xAxis, yAxis, series, grid, legend }
+            this.defineEcharts("dfdj", option);
+        },
+        ffl() {
+            let lengthData = [];
+            let Lengths = []
+            let data = [[], [], [], [], []]
+            let sum = 0
+            let arr = []
+            let dom = 800;
+            let barWidth = dom / 20;
+            let JsonData = [
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "373",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "1",
+                    "JCRWS": "52"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "534",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "2",
+                    "JCRWS": "15"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "338",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "3",
+                    "JCRWS": "20"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "4",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "133",
+                    "ZTLB": "1月",
+                    "TJRQ": "2023-09",
+                    "ID": "5",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "201",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "6",
+                    "JCRWS": "31"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "7",
+                    "JCRWS": "99"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "621",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "8",
+                    "JCRWS": "70"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "9",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "327",
+                    "ZTLB": "2月",
+                    "TJRQ": "2023-09",
+                    "ID": "10",
+                    "JCRWS": "107"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "737",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "11",
+                    "JCRWS": "40"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "491",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "12",
+                    "JCRWS": "45"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "541",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "13",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "128",
+                    "ZTLB": "3月",
+                    "TJRQ": "2023-09",
+                    "ID": "14",
+                    "JCRWS": "55"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "795",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "16",
+                    "JCRWS": "90"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "1056",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "17",
+                    "JCRWS": "57"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "181",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "18",
+                    "JCRWS": "53"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "19",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "204",
+                    "ZTLB": "4月",
+                    "TJRQ": "2023-09",
+                    "ID": "20",
+                    "JCRWS": "39"
+                },
+                {
+                    "FXDJ": "尖峰时段用电量",
+                    "ZTSL": "446",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "21",
+                    "JCRWS": "54"
+                },
+                {
+                    "FXDJ": "平时段用电量",
+                    "ZTSL": "791",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "22",
+                    "JCRWS": "84"
+                },
+                {
+                    "FXDJ": "深谷时段用电量",
+                    "ZTSL": "607",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "23",
+                    "JCRWS": "86"
+                },
+                {
+                    "FXDJ": "峰时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "24",
+                    "JCRWS": "94"
+                },
+                {
+                    "FXDJ": "谷时段用电量",
+                    "ZTSL": "831",
+                    "ZTLB": "5月",
+                    "TJRQ": "2023-09",
+                    "ID": "25",
+                    "JCRWS": "94"
+                }
+            ]
+
+            for (let item of JsonData) {
+                // x轴数据
+                if (!lengthData.some(t => t === item.ZTLB)) {
+                    lengthData.push(item.ZTLB);
+                }
+                // 图例数据
+                if (!Lengths.some(t => t === item.FXDJ)) {
+                    Lengths.push(item.FXDJ);
+                }
+            }
+            Lengths.forEach((e, j) => {
+                JsonData.forEach((k, i) => {
+                    lengthData.forEach((m, n) => {
+                        console.log(m, k.ZTLB, k.ZTSL)
+                        if (m == k.ZTLB && e == k.FXDJ) {
+                            data[j][n] = k.ZTSL
+                        }
+                    })
+                })
+            })
+
+            let xData = lengthData.map((item, index) => {
+                return {
+                    value: item,
+                };
+            });
+
+            let colors = [{
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#FFB41D'
+                }, {
+                    offset: 0.5,
+                    color: '#FFB41D'
+                }, {
+                    offset: 0.5,
+                    color: '#927719'
+                }, {
+                    offset: 1,
+                    color: '#927719'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#E7EE01'
+                }, {
+                    offset: 0.5,
+                    color: '#556B1E'
+                }, {
+                    offset: 1,
+                    color: '#556B1E'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#03D258'
+                }, {
+                    offset: 0.5,
+                    color: '#359542'
+                }, {
+                    offset: 1,
+                    color: '#359542'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 0.5,
+                    color: '#1B9EE4'
+                }, {
+                    offset: 1,
+                    color: '#1B9EE4'
+                }]
+            },
+            {
+                type: 'linear',
+                x: 0,
+                x2: 1,
+                y: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 0.5,
+                    color: '#02CFCD'
+                }, {
+                    offset: 1,
+                    color: '#02CFCD'
+                }]
+            },
+            ];
+            let option = {
+                //提示框
+                tooltip: {
+                    show: true,
+                    trigger: "axis", //axis , item
+                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
+                    borderColor: "rgba(0, 151, 251, 0)",
+                    borderWidth: 1,
+                    borderRadius: 0,
+                    textStyle: {
+                        color: "#BCE9FC",
+                        fontSize: 20,
+                        align: "left",
+                    },
+                    confine: true,
+                    // formatter(e,i){
+                    //     console.log(e,i)
+                    // },
+                },
+                /**区域位置*/
+                grid: {
+                    left: '6%',
+                    right: '4%',
+                    top: 50,
+                    bottom: 40,
+                },
+                /**图例大小*/
+                legend: {
+                    icon: "rect",
+                    data: Lengths,
+                    textStyle: {
+                        color: '#BFEBFF',
+                        fontSize: 30,
+                    },
+                    itemHeight: 16,
+                    itemWidth: 30,
+                    left: '15%',
+                    top: 0,
+                    itemGap: 50,
+                },
+                //X轴
+                xAxis: {
+                    data: xData,
+                    axisLabel: {
+                        margin: 20,
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 16,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    name: "单位：kWh",
+                    nameTextStyle: {
+                        fontSize: 18,
+                        color: "#BFEBFF",
+                    },
+                    show: true,
+                    splitNumber: 4,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#BFEBFF",
+                        },
+                    },
+                    splitLine: {
+                        //坐标轴在 grid 区域中的分隔线。
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(77, 128, 254, 0.2)",
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                        textStyle: {
+                            color: "#BFEBFF",
+                            fontStyle: "normal",
+                            fontSize: 18,
+                        },
+                    },
+                    axisTick: {
+                        //坐标轴刻度相关设置。
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        //图例一底部底片
+                        z: 2,
+                        type: 'pictorialBar',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        //图例一顶部底片
+                        z: 3,
+                        type: 'pictorialBar',
+                        symbolPosition: 'end',
+                        data: data[0],
+                        symbol: 'diamond',
+                        symbolOffset: [0, '-50%'],
+                        symbolSize: [barWidth, barWidth * 0.5],
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 0,
+                                color: function (params) {
+                                    return colors[0].colorStops[0].color;
+                                },
+
+                            }
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+            };
+            data.forEach((e, i) => {
+                arr.push(e)
+                if (sum < i) {
+                    sum++
+                    option.series.push(
+                        {
+                            //图例二顶部底片
+                            z: 3,
+                            type: 'pictorialBar',
+                            symbolPosition: 'end',
+                            data: this.addArray(arr),
+                            symbol: 'diamond',
+                            symbolOffset: [0, '-50%'],
+                            symbolSize: [barWidth, barWidth * 0.5],
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return colors[i].colorStops[0].color;
+                                    },
+
+                                }
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                        }
+                    )
+                }
+                option.series.push(
+                    {
+                        type: 'bar',
+                        name: Lengths[i],
+                        barWidth: barWidth,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return colors[i];
+                                }
+                            },
+
+                        },
+                        stack: '1',
+                        data: e,
+
+                    }
+                )
+            })
+            this.defineEcharts("ffl", option)
+        },
+        addArray(arr) {
+            let result = []
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].forEach((value, index) => {
+                    if (result[index] == null || result[index] == "") {
+                        result[index] = 0;
+                    }
+                    result[index] += parseInt(value);
+                })
+            }
+            return result
+        }
+    },
+    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("nylx", this.option1);
+        // this.dfdj();
+        this.dfdj2();
+        this.ffl();
+        // this.defineEcharts("yysl", this.option2);
+        // 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;
+        }
+
+        .nylx {
+            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";
+                }
+            }
+
+            #nylx {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .ffl {
+            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";
+                }
+            }
+
+            #ffl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+            }
+        }
+
+        .nxdb {
+            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";
+                }
+            }
+
+            #nxdb {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                /deep/ .table {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .jnl {
+            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;
+
+                #jnl {
+                    width: 1156px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+
+                    img {
+                        width: 320px;
+                        height: auto;
+                        margin-left: 80px;
+                    }
+
+                    .zx {
+                        font-size: 30px;
+                        position: absolute;
+                        top: 100px;
+                        left: 700px;
+                    }
+
+                    .span_jnl {
+                        position: absolute;
+                        top: 150px;
+                        left: 700px;
+                    }
+                }
+            }
+        }
+
+        .dfdj {
+            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";
+                }
+            }
+
+            #dfdj {
+                width: 1155px;
+                height: 630px;
+                margin-top: 50px;
+            }
+        }
+
+        .sbyxqk {
+            position: relative;
+            margin-top: 56px;
+
+            // margin-bottom: 50px;
+            /deep/ .table {
+                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;
+                }
+            }
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sbyxqk {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231205165241.vue b/.history/src/views/Zhou/NXGL_20231205165241.vue
new file mode 100644
index 0000000..0562b51
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165241.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i];
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205165421.vue b/.history/src/views/Zhou/NXGL_20231205165421.vue
new file mode 100644
index 0000000..8ab6a62
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165421.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "Roundrect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i];
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205165430.vue b/.history/src/views/Zhou/NXGL_20231205165430.vue
new file mode 100644
index 0000000..0562b51
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165430.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i];
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205165527.vue b/.history/src/views/Zhou/NXGL_20231205165527.vue
new file mode 100644
index 0000000..6158e2d
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165527.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i];
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205165731.vue b/.history/src/views/Zhou/NXGL_20231205165731.vue
new file mode 100644
index 0000000..92ad663
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165731.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205165819.vue b/.history/src/views/Zhou/NXGL_20231205165819.vue
new file mode 100644
index 0000000..402b54d
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165819.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+        //   data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205165849.vue b/.history/src/views/Zhou/NXGL_20231205165849.vue
new file mode 100644
index 0000000..a1b6da0
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165849.vue
@@ -0,0 +1,1686 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+        //   data: Lengths,
+        data:["","","","",""],
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205165931.vue b/.history/src/views/Zhou/NXGL_20231205165931.vue
new file mode 100644
index 0000000..0057f4b
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205165931.vue
@@ -0,0 +1,1686 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+        //   data: Lengths,
+        data:["尖峰时段用电量","平时段用电量","","",""],
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205170050.vue b/.history/src/views/Zhou/NXGL_20231205170050.vue
new file mode 100644
index 0000000..2a484f0
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205170050.vue
@@ -0,0 +1,1686 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+        //   data: Lengths,
+        data:["尖峰时段用电量","平时段用电量","深谷时段用电量","",""],
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205170101.vue b/.history/src/views/Zhou/NXGL_20231205170101.vue
new file mode 100644
index 0000000..fb6451f
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205170101.vue
@@ -0,0 +1,1686 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+        //   data: Lengths,
+        data:["尖峰时段用电量","平时段用电量","深谷时段用电量","峰时段用电量",""],
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205170111.vue b/.history/src/views/Zhou/NXGL_20231205170111.vue
new file mode 100644
index 0000000..a187c07
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205170111.vue
@@ -0,0 +1,1686 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+        //   data: Lengths,
+        data:["尖峰时段用电量","平时段用电量","深谷时段用电量","峰时段用电量","谷时段用电量"],
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205170129.vue b/.history/src/views/Zhou/NXGL_20231205170129.vue
new file mode 100644
index 0000000..92ad663
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205170129.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205170328.vue b/.history/src/views/Zhou/NXGL_20231205170328.vue
new file mode 100644
index 0000000..92ad663
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205170328.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/NXGL_20231205170329.vue b/.history/src/views/Zhou/NXGL_20231205170329.vue
new file mode 100644
index 0000000..92ad663
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231205170329.vue
@@ -0,0 +1,1685 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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: {
+        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;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          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: {
+              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)" },
+              ],
+            },
+          },
+        },
+        {
+          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)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // 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;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/TZCGL_20231205173431.vue b/.history/src/views/Zhou/TZCGL_20231205173431.vue
new file mode 100644
index 0000000..c48f14f
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205173431.vue
@@ -0,0 +1,1704 @@
+<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 id="tlt"></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","","",""],
+          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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205173511.vue b/.history/src/views/Zhou/TZCGL_20231205173511.vue
new file mode 100644
index 0000000..60e534e
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205173511.vue
@@ -0,0 +1,1704 @@
+<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 id="tlt"></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","","",""],
+          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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205173515.vue b/.history/src/views/Zhou/TZCGL_20231205173515.vue
new file mode 100644
index 0000000..7694795
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205173515.vue
@@ -0,0 +1,1704 @@
+<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 id="tlt"></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","","",""],
+          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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205173536.vue b/.history/src/views/Zhou/TZCGL_20231205173536.vue
new file mode 100644
index 0000000..99d4486
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205173536.vue
@@ -0,0 +1,1704 @@
+<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 id="tlt"></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"],
+          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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205173614.vue b/.history/src/views/Zhou/TZCGL_20231205173614.vue
new file mode 100644
index 0000000..558e44d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205173614.vue
@@ -0,0 +1,1704 @@
+<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 id="tlt"></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"],
+          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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205173750.vue b/.history/src/views/Zhou/TZCGL_20231205173750.vue
new file mode 100644
index 0000000..26657c0
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205173750.vue
@@ -0,0 +1,1704 @@
+<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 id="tlt"></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: true,
+          data: ["","","","12:20","","","", "13:20","","","", "14:20","","","", "15:20"],
+          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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205173759.vue b/.history/src/views/Zhou/TZCGL_20231205173759.vue
new file mode 100644
index 0000000..558e44d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205173759.vue
@@ -0,0 +1,1704 @@
+<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 id="tlt"></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"],
+          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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205173825.vue b/.history/src/views/Zhou/TZCGL_20231205173825.vue
new file mode 100644
index 0000000..558e44d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205173825.vue
@@ -0,0 +1,1704 @@
+<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 id="tlt"></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"],
+          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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174027.vue b/.history/src/views/Zhou/TZCGL_20231205174027.vue
new file mode 100644
index 0000000..dc5a8a0
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174027.vue
@@ -0,0 +1,1725 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174050.vue b/.history/src/views/Zhou/TZCGL_20231205174050.vue
new file mode 100644
index 0000000..bc85bc3
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174050.vue
@@ -0,0 +1,1725 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174113.vue b/.history/src/views/Zhou/TZCGL_20231205174113.vue
new file mode 100644
index 0000000..ae0148e
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174113.vue
@@ -0,0 +1,1725 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174120.vue b/.history/src/views/Zhou/TZCGL_20231205174120.vue
new file mode 100644
index 0000000..bc85bc3
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174120.vue
@@ -0,0 +1,1725 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174124.vue b/.history/src/views/Zhou/TZCGL_20231205174124.vue
new file mode 100644
index 0000000..94f179d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174124.vue
@@ -0,0 +1,1726 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174127.vue b/.history/src/views/Zhou/TZCGL_20231205174127.vue
new file mode 100644
index 0000000..33a1033
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174127.vue
@@ -0,0 +1,1727 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174130.vue b/.history/src/views/Zhou/TZCGL_20231205174130.vue
new file mode 100644
index 0000000..0e5bd3d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174130.vue
@@ -0,0 +1,1728 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174134.vue b/.history/src/views/Zhou/TZCGL_20231205174134.vue
new file mode 100644
index 0000000..f459d6e
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174134.vue
@@ -0,0 +1,1729 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,
+            ],
+            // 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174202.vue b/.history/src/views/Zhou/TZCGL_20231205174202.vue
new file mode 100644
index 0000000..2de181f
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174202.vue
@@ -0,0 +1,1729 @@
+<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 id="tlt"></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, 29, 19, 20, 18, 20, 9,28,21,35,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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174216.vue b/.history/src/views/Zhou/TZCGL_20231205174216.vue
new file mode 100644
index 0000000..fda90f5
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174216.vue
@@ -0,0 +1,1729 @@
+<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 id="tlt"></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, 29, 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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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_20231205174223.vue b/.history/src/views/Zhou/TZCGL_20231205174223.vue
new file mode 100644
index 0000000..f3ecaf1
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231205174223.vue
@@ -0,0 +1,1729 @@
+<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 id="tlt"></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: {
+        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 },
+          ],
+        },
+      },
+      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 = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#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],
+              },
+            },
+          },
+          {
+            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: "#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[index],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      // 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: 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: '#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[index],
+      //                 fontSize: 40,
+      //                 align: "left",
+      //             },
+      //             names: {
+      //                 color: "#fff",
+      //                 fontSize: 30,
+      //             }
+      //         },
+      //     }
+      // }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 40,
+                length2: 100,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          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: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 900,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
+            // 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, 400, 200, 400, 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: true,
+                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.6, 180, 26, 18, 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: 50px;
+        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: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tlt {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+
+    .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";
+        }
+      }
+
+      .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/NXGL.vue b/src/views/Zhou/NXGL.vue
index 180d5c0..92ad663 100644
--- a/src/views/Zhou/NXGL.vue
+++ b/src/views/Zhou/NXGL.vue
@@ -1,1256 +1,1322 @@
 <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="nylx">
-                <div class="imgBox">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>能源流向</p>
-                </div>
-                <div id="nylx"></div>
-            </div>
-            <div class="ffl">
-                <div class="imgBox">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>复费率</p>
-                </div>
-                <div id="ffl"></div>
-            </div>
-            <div class="nxdb">
-                <div class="imgBox">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>能效对标（定额管理）</p>
-                </div>
-                <div id="nxdb">
-                    <div class="table">
-                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
-                            header-cell-style="background-color: #1969A8; color: white">
-                            <el-table-column prop="date1" label="" align="center" width="480">
-                            </el-table-column>
-                            <el-table-column prop="date2" label="先进值" align="center">
-                            </el-table-column>
-                            <el-table-column prop="date3" label="企业" align="center">
-                            </el-table-column>
-                            <el-table-column prop="date4" label="同比" align="center">
-                                <template scope="scope">
-                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="right">
-            <div class="jnl">
-                <div class="imgBox">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>节能量（节电率）</p>
-                </div>
-                <div class="chartBox">
-                    <div id="jnl">
-                        <img src="../../assets/NXGL/r1.png" alt="" />
-                        <div class="zx">
-                            <span>节能量（节电率）:</span>
-                        </div>
-                        <div class="span_jnl">
-                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="dfdj">
-                <div class="imgBox">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>电费电价</p>
-                </div>
-                <div class="chartBox">
-                    <div id="dfdj">
-
-                    </div>
-                </div>
-            </div>
-            <div class="sbyxqk">
-                <div class="imgBox">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>设备运行情况</p>
-                </div>
-                <div id="sbyxqk">
-                    <div class="table">
-                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
-                            <el-table-column prop="date1" label="设备名称" align="center">
-                            </el-table-column>
-                            <el-table-column prop="date2" label="开关状态" align="center">
-                                <template scope="scope">
-                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
-                                    <img src="../../assets/KDFH/jinggao.png" v-else />
-                                </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>
-            </div>
-        </div>
+  <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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx"></div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </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>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import * as echarts from "echarts";
 export default {
-    data() {
-        return {
-            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: {
-                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
-                        },
-                        rich: {
-                            white: {
-                                fontSize: 20,
-                                padding: [10, 0, 0, 0],
-                            },
-                        },
-                    },
-                    nodeGap: 20,
-                    layoutIterations: 1,
-                    emphasis: {
-                        // focus: "adjacency",
-                    },
-                    data: [
-                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
-                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
-                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
-                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
-                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
-                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                    ],
-                    links: [
-                        // L1→L3	 4509
-                        { source: "原始值折标煤", target: "水", value: 800 },
-                        { source: "原始值折标煤", target: "电", value: 800 },
-                        { source: "原始值折标煤", target: "余热发电", value: 800 },
-                        { source: "原始值折标煤", target: "煤", value: 800 },
-                        // L1→L2→L3	 2404
-                        { source: "煤", target: "11", value: 200 },
-                        { source: "煤", target: "22", value: 200 },
-                        { source: "煤", target: "33", value: 200 },
-                        { source: "余热发电", target: "1", value: 200 },
-                        { source: "余热发电", target: "2", value: 200 },
-                        { source: "余热发电", target: "3", value: 200 },
-                    ],
-                },
+  data() {
+    return {
+      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: {
+        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;
             },
-        };
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 20,
+          layoutIterations: 1,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "原始值折标煤", target: "水", value: 800 },
+            { source: "原始值折标煤", target: "电", value: 800 },
+            { source: "原始值折标煤", target: "余热发电", value: 800 },
+            { source: "原始值折标煤", target: "煤", value: 800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "11", value: 200 },
+            { source: "煤", target: "22", value: 200 },
+            { source: "煤", target: "33", value: 200 },
+            { source: "余热发电", target: "1", value: 200 },
+            { source: "余热发电", target: "2", value: 200 },
+            { source: "余热发电", target: "3", value: 200 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
     },
-    methods: {
-        //U3D交互的绑定
-        sendMessageToCSharp() {
-            // window.vuplex.postMessage({
-            //     type: "Tog",
-            //     message: "能效管理_true",
-            // });
-            window.vuplex.postMessage("能效管理");
-            this.$router.push('/nxglnh');
+    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 "";
+    },
+    // dfdj() {
+    //     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月"];
+    //     let seriesData = [34, 36, 48, 13, 38];
+    //     //拿到最大值
+    //     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: "单位:kWh",
+    //             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%'],
+    //         }, {
+    //             show: true,
+    //         }],
+    //         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: true,
+    //                         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("dfdj", option);
+    // },
+    dfdj2() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            name: "电费",
+            icon: "rect",
+          },
+          {
+            name: "销售电价",
+            icon: "rect",
+          },
+        ],
+        textStyle: {
+          color: "#fff",
+          fontSize: "20px",
         },
-        defineEcharts(dom, option) {
-            var chartDom = document.getElementById(dom);
-            var myChart = this.$echarts.init(chartDom);
-            myChart.setOption(option);
+        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",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
         },
-        tableRowClassName({ row, rowIndex }) {
-            if ((rowIndex + 1) % 2 === 0) {
-                return "success-row";
-            }
-            return "";
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
         },
-        // dfdj() {
-        //     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月"];
-        //     let seriesData = [34, 36, 48, 13, 38];
-        //     //拿到最大值
-        //     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: "单位:kWh",
-        //             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%'],
-        //         }, {
-        //             show: true,
-        //         }],
-        //         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: true,
-        //                         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("dfdj", option);
-        // },
-        dfdj2() {
-            // mock 数据
-            const dataArr = {
-                xdata: ['1月', '2月', '3月', '4月', '5月'],
-                rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
-                disinfeced: [32, 34, 48, 14, 38],
-                // placeData: [320, 435, 490, 340, 320, 270, 360]
-            }
-
-            const legend = {
-                data: [
-                    {
-                        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",
-                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
-                axisLine: { show: false, lineStyle: { color: "#fff" } },
-                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
-            }, {
-                // 双y轴，主要用于折线图，所以不需要显示坐标
-                type: "value",
-                show: true,
-                min: 0,
-                max: 1,
-                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: {
-                            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)' }]
-                        }
-                    },
-                }, {
-                    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)'
-                    },
-                }, {
-                    z: 1,
-                    stack: '总量',
-                    type: 'bar',
-                    name: '电费',
-                    barWidth: 30,
-                    // barGap: '-100%',
-                    data: dataArr.disinfeced,
-                    itemStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0, x2: 1, y: 0, y2: 0,
-                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
-                        }
-                    },
-                }, {
-                    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: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
-                        global: false // 缺省为 false
-                    },
-                    lineStyle: {
-                        color: {
-                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                            // 0% 处的颜色                           // 100% 处的颜色
-                            colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
-                            global: false // 缺省为 false
-                        }
-                    },
-                    // 修改的是线下区域的颜色
-                    areaStyle: {
-                        color: new echarts.graphic.LinearGradient(
-                            // 右/下/左/上
-                            0, 0, 0, 1, [
-                            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
-                            { offset: 1, color: 'transparent' }
-                        ])
-                    },
-                    label: {
-                        show: true,
-                        textStyle: { fontSize: 16, color: '#ffd11a' }
-                    },
-                    data: dataArr.rateData
-                }]
-            let option = { xAxis, yAxis, series, grid, legend }
-            this.defineEcharts("dfdj", option);
+      // 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: {
+              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)" },
+              ],
+            },
+          },
         },
-        ffl() {
-            let lengthData = [];
-            let Lengths = []
-            let data = [[], [], [], [], []]
-            let sum = 0
-            let arr = []
-            let dom = 800;
-            let barWidth = dom / 20;
-            let JsonData = [
-                {
-                    "FXDJ": "尖峰时段用电量",
-                    "ZTSL": "373",
-                    "ZTLB": "1月",
-                    "TJRQ": "2023-09",
-                    "ID": "1",
-                    "JCRWS": "52"
-                },
-                {
-                    "FXDJ": "平时段用电量",
-                    "ZTSL": "534",
-                    "ZTLB": "1月",
-                    "TJRQ": "2023-09",
-                    "ID": "2",
-                    "JCRWS": "15"
-                },
-                {
-                    "FXDJ": "深谷时段用电量",
-                    "ZTSL": "338",
-                    "ZTLB": "1月",
-                    "TJRQ": "2023-09",
-                    "ID": "3",
-                    "JCRWS": "20"
-                },
-                {
-                    "FXDJ": "峰时段用电量",
-                    "ZTSL": "133",
-                    "ZTLB": "1月",
-                    "TJRQ": "2023-09",
-                    "ID": "4",
-                    "JCRWS": "99"
-                },
-                {
-                    "FXDJ": "谷时段用电量",
-                    "ZTSL": "133",
-                    "ZTLB": "1月",
-                    "TJRQ": "2023-09",
-                    "ID": "5",
-                    "JCRWS": "99"
-                },
-                {
-                    "FXDJ": "尖峰时段用电量",
-                    "ZTSL": "201",
-                    "ZTLB": "2月",
-                    "TJRQ": "2023-09",
-                    "ID": "6",
-                    "JCRWS": "31"
-                },
-                {
-                    "FXDJ": "平时段用电量",
-                    "ZTSL": "327",
-                    "ZTLB": "2月",
-                    "TJRQ": "2023-09",
-                    "ID": "7",
-                    "JCRWS": "99"
-                },
-                {
-                    "FXDJ": "深谷时段用电量",
-                    "ZTSL": "621",
-                    "ZTLB": "2月",
-                    "TJRQ": "2023-09",
-                    "ID": "8",
-                    "JCRWS": "70"
-                },
-                {
-                    "FXDJ": "峰时段用电量",
-                    "ZTSL": "327",
-                    "ZTLB": "2月",
-                    "TJRQ": "2023-09",
-                    "ID": "9",
-                    "JCRWS": "107"
-                },
-                {
-                    "FXDJ": "谷时段用电量",
-                    "ZTSL": "327",
-                    "ZTLB": "2月",
-                    "TJRQ": "2023-09",
-                    "ID": "10",
-                    "JCRWS": "107"
-                },
-                {
-                    "FXDJ": "尖峰时段用电量",
-                    "ZTSL": "737",
-                    "ZTLB": "3月",
-                    "TJRQ": "2023-09",
-                    "ID": "11",
-                    "JCRWS": "40"
-                },
-                {
-                    "FXDJ": "平时段用电量",
-                    "ZTSL": "491",
-                    "ZTLB": "3月",
-                    "TJRQ": "2023-09",
-                    "ID": "12",
-                    "JCRWS": "45"
-                },
-                {
-                    "FXDJ": "深谷时段用电量",
-                    "ZTSL": "541",
-                    "ZTLB": "3月",
-                    "TJRQ": "2023-09",
-                    "ID": "13",
-                    "JCRWS": "57"
-                },
-                {
-                    "FXDJ": "峰时段用电量",
-                    "ZTSL": "128",
-                    "ZTLB": "3月",
-                    "TJRQ": "2023-09",
-                    "ID": "14",
-                    "JCRWS": "55"
-                },
-                {
-                    "FXDJ": "谷时段用电量",
-                    "ZTSL": "128",
-                    "ZTLB": "3月",
-                    "TJRQ": "2023-09",
-                    "ID": "14",
-                    "JCRWS": "55"
-                },
-                {
-                    "FXDJ": "尖峰时段用电量",
-                    "ZTSL": "795",
-                    "ZTLB": "4月",
-                    "TJRQ": "2023-09",
-                    "ID": "16",
-                    "JCRWS": "90"
-                },
-                {
-                    "FXDJ": "平时段用电量",
-                    "ZTSL": "1056",
-                    "ZTLB": "4月",
-                    "TJRQ": "2023-09",
-                    "ID": "17",
-                    "JCRWS": "57"
-                },
-                {
-                    "FXDJ": "深谷时段用电量",
-                    "ZTSL": "181",
-                    "ZTLB": "4月",
-                    "TJRQ": "2023-09",
-                    "ID": "18",
-                    "JCRWS": "53"
-                },
-                {
-                    "FXDJ": "峰时段用电量",
-                    "ZTSL": "204",
-                    "ZTLB": "4月",
-                    "TJRQ": "2023-09",
-                    "ID": "19",
-                    "JCRWS": "39"
-                },
-                {
-                    "FXDJ": "谷时段用电量",
-                    "ZTSL": "204",
-                    "ZTLB": "4月",
-                    "TJRQ": "2023-09",
-                    "ID": "20",
-                    "JCRWS": "39"
-                },
-                {
-                    "FXDJ": "尖峰时段用电量",
-                    "ZTSL": "446",
-                    "ZTLB": "5月",
-                    "TJRQ": "2023-09",
-                    "ID": "21",
-                    "JCRWS": "54"
-                },
-                {
-                    "FXDJ": "平时段用电量",
-                    "ZTSL": "791",
-                    "ZTLB": "5月",
-                    "TJRQ": "2023-09",
-                    "ID": "22",
-                    "JCRWS": "84"
-                },
-                {
-                    "FXDJ": "深谷时段用电量",
-                    "ZTSL": "607",
-                    "ZTLB": "5月",
-                    "TJRQ": "2023-09",
-                    "ID": "23",
-                    "JCRWS": "86"
-                },
-                {
-                    "FXDJ": "峰时段用电量",
-                    "ZTSL": "831",
-                    "ZTLB": "5月",
-                    "TJRQ": "2023-09",
-                    "ID": "24",
-                    "JCRWS": "94"
-                },
-                {
-                    "FXDJ": "谷时段用电量",
-                    "ZTSL": "831",
-                    "ZTLB": "5月",
-                    "TJRQ": "2023-09",
-                    "ID": "25",
-                    "JCRWS": "94"
-                }
-            ]
-
-            for (let item of JsonData) {
-                // x轴数据
-                if (!lengthData.some(t => t === item.ZTLB)) {
-                    lengthData.push(item.ZTLB);
-                }
-                // 图例数据
-                if (!Lengths.some(t => t === item.FXDJ)) {
-                    Lengths.push(item.FXDJ);
-                }
-            }
-            Lengths.forEach((e, j) => {
-                JsonData.forEach((k, i) => {
-                    lengthData.forEach((m, n) => {
-                        console.log(m, k.ZTLB, k.ZTSL)
-                        if (m == k.ZTLB && e == k.FXDJ) {
-                            data[j][n] = k.ZTSL
-                        }
-                    })
-                })
-            })
-
-            let xData = lengthData.map((item, index) => {
-                return {
-                    value: item,
-                };
-            });
-
-            let colors = [{
-                type: 'linear',
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: [{
-                    offset: 0,
-                    color: '#FF3FDA'
-                }, {
-                    offset: 0.5,
-                    color: '#FF3FDA'
-                }, {
-                    offset: 0.5,
-                    color: '#CC1BAA'
-                }, {
-                    offset: 1,
-                    color: '#CC1BAA'
-                }]
-            },
-            {
-                type: 'linear',
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: [{
-                    offset: 0,
-                    color: '#602CFF'
-                }, {
-                    offset: 0.5,
-                    color: '#602CFF'
-                }, {
-                    offset: 0.5,
-                    color: '#4915E6'
-                }, {
-                    offset: 1,
-                    color: '#4915E6'
-                }]
-            },
-            {
-                type: 'linear',
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: [{
-                    offset: 0,
-                    color: '#00FFFF'
-                }, {
-                    offset: 0.5,
-                    color: '#00FFFF'
-                }, {
-                    offset: 0.5,
-                    color: '#11A6D0'
-                }, {
-                    offset: 1,
-                    color: '#11A6D0'
-                }]
-            },
-            {
-                type: 'linear',
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: [{
-                    offset: 0,
-                    color: '#89FF5E'
-                }, {
-                    offset: 0.5,
-                    color: '#89FF5E'
-                }, {
-                    offset: 0.5,
-                    color: '#48DD12'
-                }, {
-                    offset: 1,
-                    color: '#48DD12'
-                }]
-            },
-            {
-                type: 'linear',
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: [{
-                    offset: 0,
-                    color: '#FFD05C'
-                }, {
-                    offset: 0.5,
-                    color: '#FFD05C'
-                }, {
-                    offset: 0.5,
-                    color: '#DEA821'
-                }, {
-                    offset: 1,
-                    color: '#DEA821'
-                }]
-            },
-            {
-                type: 'linear',
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: [{
-                    offset: 0,
-                    color: '#FF7853'
-                }, {
-                    offset: 0.5,
-                    color: '#FF7853'
-                }, {
-                    offset: 0.5,
-                    color: '#DB3E13'
-                }, {
-                    offset: 1,
-                    color: '#DB3E13'
-                }]
-            },
-            {
-                type: 'linear',
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: [{
-                    offset: 0,
-                    color: '#AA48FF'
-                }, {
-                    offset: 0.5,
-                    color: '#AA48FF'
-                }, {
-                    offset: 0.5,
-                    color: '#8E15F8'
-                }, {
-                    offset: 1,
-                    color: '#8E15F8'
-                }]
-            }
-            ];
-            let option = {
-                //提示框
-                tooltip: {
-                    show: true,
-                    trigger: "axis", //axis , item
-                    backgroundColor: "RGBA(0, 49, 85, 0.5)",
-                    borderColor: "rgba(0, 151, 251, 0)",
-                    borderWidth: 1,
-                    borderRadius: 0,
-                    textStyle: {
-                        color: "#BCE9FC",
-                        fontSize: 20,
-                        align: "left",
-                    },
-                    confine: true,
-                    // formatter(e,i){
-                    //     console.log(e,i)
-                    // },
-                },
-                /**区域位置*/
-                grid: {
-                    left: '6%',
-                    right: '4%',
-                    top: 50,
-                    bottom: 40,
-                },
-                /**图例大小*/
-                legend: {
-                    icon: "rect",
-                    data: Lengths,
-                    textStyle: {
-                        color: '#BFEBFF',
-                        fontSize: 30,
-                    },
-                    itemHeight: 16,
-                    itemWidth: 30,
-                    left: '15%',
-                    top: 0,
-                    itemGap: 50,
-                },
-                //X轴
-                xAxis: {
-                    data: xData,
-                    axisLabel: {
-                        margin: 20,
-                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
-                        textStyle: {
-                            color: "#BFEBFF",
-                            fontStyle: "normal",
-                            fontSize: 16,
-                        },
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "#BFEBFF",
-                        },
-                    },
-                    splitLine: {
-                        //坐标轴在 grid 区域中的分隔线。
-                        show: false,
-                        lineStyle: {
-                            color: "rgba(77, 128, 254, 0.2)",
-                        },
-                    },
-                    axisTick: {
-                        //坐标轴刻度相关设置。
-                        show: false,
-                    },
-                },
-                yAxis: {
-                    name: "单位：kWh",
-                    nameTextStyle: {
-                        fontSize: 18,
-                        color: "#BFEBFF",
-                    },
-                    show: true,
-                    splitNumber: 4,
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "#BFEBFF",
-                        },
-                    },
-                    splitLine: {
-                        //坐标轴在 grid 区域中的分隔线。
-                        show: false,
-                        lineStyle: {
-                            color: "rgba(77, 128, 254, 0.2)",
-                        },
-                    },
-                    axisLabel: {
-                        //坐标轴刻度标签的相关设置。
-                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
-                        textStyle: {
-                            color: "#BFEBFF",
-                            fontStyle: "normal",
-                            fontSize: 18,
-                        },
-                    },
-                    axisTick: {
-                        //坐标轴刻度相关设置。
-                        show: false,
-                    },
-                },
-                series: [
-                    {
-                        //图例一底部底片
-                        z: 2,
-                        type: 'pictorialBar',
-                        data: data[0],
-                        symbol: 'diamond',
-                        symbolOffset: [0, '50%'],
-                        symbolSize: [barWidth, barWidth * 0.5],
-                        itemStyle: {
-                            normal: {
-                                color: function (params) {
-                                    return colors[0];
-                                },
-                            }
-                        },
-                        tooltip: {
-                            show: false,
-                        },
-                    },
-                    {
-                        //图例一顶部底片
-                        z: 3,
-                        type: 'pictorialBar',
-                        symbolPosition: 'end',
-                        data: data[0],
-                        symbol: 'diamond',
-                        symbolOffset: [0, '-50%'],
-                        symbolSize: [barWidth, barWidth * 0.5],
-                        itemStyle: {
-                            normal: {
-                                borderWidth: 0,
-                                color: function (params) {
-                                    return colors[0].colorStops[0].color;
-                                },
-
-                            }
-                        },
-                        tooltip: {
-                            show: false,
-                        },
-                    },
-                ],
-            };
-            data.forEach((e, i) => {
-                arr.push(e)
-                if (sum < i) {
-                    sum++
-                    option.series.push(
-                        {
-                            //图例二顶部底片
-                            z: 3,
-                            type: 'pictorialBar',
-                            symbolPosition: 'end',
-                            data: this.addArray(arr),
-                            symbol: 'diamond',
-                            symbolOffset: [0, '-50%'],
-                            symbolSize: [barWidth, barWidth * 0.5],
-                            itemStyle: {
-                                normal: {
-                                    color: function (params) {
-                                        return colors[i].colorStops[0].color;
-                                    },
-
-                                }
-                            },
-                            tooltip: {
-                                show: false,
-                            },
-                        }
-                    )
-                }
-                option.series.push(
-                    {
-                        type: 'bar',
-                        name: Lengths[i],
-                        barWidth: barWidth,
-                        itemStyle: {
-                            normal: {
-                                color: function (params) {
-                                    return colors[i];
-                                }
-                            },
-
-                        },
-                        stack: '1',
-                        data: e,
-
-                    }
-                )
-            })
-            this.defineEcharts("ffl", option)
+        {
+          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)",
+          },
         },
-        addArray(arr) {
-            let result = []
-            for (let i = 0; i < arr.length; i++) {
-                arr[i].forEach((value, index) => {
-                    if (result[index] == null || result[index] == "") {
-                        result[index] = 0;
-                    }
-                    result[index] += parseInt(value);
-                })
-            }
-            return result
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          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: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: true,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "1056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "446",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "791",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "607",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
         }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#FFB41D",
+            },
+            {
+              offset: 0.5,
+              color: "#927719",
+            },
+            {
+              offset: 1,
+              color: "#927719",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#E7EE01",
+            },
+            {
+              offset: 0.5,
+              color: "#556B1E",
+            },
+            {
+              offset: 1,
+              color: "#556B1E",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#03D258",
+            },
+            {
+              offset: 0.5,
+              color: "#359542",
+            },
+            {
+              offset: 1,
+              color: "#359542",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 0.5,
+              color: "#1B9EE4",
+            },
+            {
+              offset: 1,
+              color: "#1B9EE4",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 0.5,
+              color: "#02CFCD",
+            },
+            {
+              offset: 1,
+              color: "#02CFCD",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: 50,
+          bottom: 40,
+        },
+        /**图例大小*/
+        legend: {
+          icon: "rect",
+          data: Lengths,
+          textStyle: {
+            color: "#BFEBFF",
+            fontSize: 30,
+          },
+          itemHeight: 16,
+          itemWidth: 30,
+          left: "15%",
+          top: 0,
+          itemGap: 50,
+        },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#BFEBFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#BFEBFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
     },
-    created() {
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  created() {
     // if (window.vuplex) {
     //   addMessageListener();
     // } else {
@@ -1262,358 +1328,358 @@ export default {
     //   })
     // }
   },
-    mounted() {
-        this.defineEcharts("nylx", this.option1);
-        // this.dfdj();
-        this.dfdj2();
-        this.ffl();
-        // this.defineEcharts("yysl", this.option2);
-        // this.defineEcharts("nysl", this.option3);
-        // this.defineEcharts("nhfx", this.option4);
-    },
+  mounted() {
+    this.defineEcharts("nylx", this.option1);
+    // this.dfdj();
+    this.dfdj2();
+    this.ffl();
+    // this.defineEcharts("yysl", this.option2);
+    // this.defineEcharts("nysl", this.option3);
+    // this.defineEcharts("nhfx", this.option4);
+  },
 };
 </script>
 <style scoped lang="less">
 .box {
-    width: 100%;
-    height: 100%;
+  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;
-    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;
-        }
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
     }
 
-    .left {
-        width: 1237px;
-        height: 2500px;
-        margin-left: 61px;
-        background-image: url("../../assets/img/侧边.png");
-        padding-left: 59px;
-        padding-right: 45px;
-        box-sizing: border-box;
+    .nylx {
+      position: relative;
+      margin-top: 56px;
 
-        .title {
-            margin-top: 15px;
-            margin-left: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
         }
+      }
 
-        .nylx {
-            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";
-                }
-            }
-
-            #nylx {
-                width: 1155px;
-                height: 500px;
-                margin-top: 50px;
-            }
-        }
-
-        .ffl {
-            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";
-                }
-            }
-
-            #ffl {
-                width: 1155px;
-                height: 500px;
-                margin-top: 50px;
-            }
-        }
-
-        .nxdb {
-            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";
-                }
-            }
-
-            #nxdb {
-                width: 1155px;
-                height: 500px;
-                margin-top: 50px;
-
-                /deep/ .table {
-                    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;
-                    }
-                }
-            }
-        }
+      #nylx {
+        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;
+    .ffl {
+      position: relative;
+      margin-top: 56px;
 
-        .jnl {
-            position: relative;
-            margin-top: 130px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
 
-            .imgBox {
-                height: 93px;
-                width: 1156px;
-
-                p {
-                    position: absolute;
-                    color: #fff;
-                    top: 20px;
-                    left: 50px;
-                    font-size: 30px;
-                    font-family: "MicrosoftYaHei";
-                }
-            }
-
-            .chartBox {
-                margin-top: 50px;
-
-                #jnl {
-                    width: 1156px;
-                    font-size: 20px;
-                    color: #fff;
-                    position: relative;
-
-                    img {
-                        width: 320px;
-                        height: auto;
-                        margin-left: 80px;
-                    }
-
-                    .zx {
-                        font-size: 30px;
-                        position: absolute;
-                        top: 100px;
-                        left: 700px;
-                    }
-
-                    .span_jnl {
-                        position: absolute;
-                        top: 150px;
-                        left: 700px;
-                    }
-                }
-            }
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
         }
+      }
 
-        .dfdj {
-            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";
-                }
-            }
-
-            #dfdj {
-                width: 1155px;
-                height: 630px;
-                margin-top: 50px;
-            }
-        }
-
-        .sbyxqk {
-            position: relative;
-            margin-top: 56px;
-
-            // margin-bottom: 50px;
-            /deep/ .table {
-                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;
-                }
-            }
-
-            .imgBox {
-                height: 93px;
-                width: 1156px;
-
-                p {
-                    position: absolute;
-                    color: #fff;
-                    top: 20px;
-                    left: 50px;
-                    font-size: 30px;
-                    font-family: "MicrosoftYaHei";
-                }
-            }
-
-            #sbyxqk {
-                width: 1155px;
-                height: 400px;
-                margin-top: 50px;
-            }
-        }
+      #ffl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
     }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      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;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/Zhou/TZCGL.vue b/src/views/Zhou/TZCGL.vue
index fb8b98c..f3ecaf1 100644
--- a/src/views/Zhou/TZCGL.vue
+++ b/src/views/Zhou/TZCGL.vue
@@ -198,7 +198,31 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: ["12:20", "13:20", "14:20", "15:20"],
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            interval: false, // 设置刻度点连续显示
+          },
           axisLabel: {
             show: true,
             interval: 0,
@@ -206,7 +230,7 @@ export default {
               color: "#fff",
               fontSize: 20,
             },
-            interval: 0, //代表显示所有x轴标签显示
+            // interval: 0, //代表显示所有x轴标签显示
           },
         },
         yAxis: {
@@ -240,7 +264,7 @@ export default {
             type: "line",
             name: "碳排放量",
             data: [
-              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 29, 19, 20, 18, 20, 9,
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,28,21,32,24
             ],
             // smooth: true,
             itemStyle: {
@@ -1269,7 +1293,8 @@ export default {
   box-sizing: border-box;
   background-color: transparent;
   display: flex;
-  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
   padding-top: 400px;
   justify-content: space-between;
   position: relative;